<template>
    <v-group
        ref="groupRef"
        v-for="(sentenceInfo, sentenceIndex) in configList"
        @click="emits('click', $event, sentenceInfo)"
    >
        <!-- 高亮交互区域 -->
        <v-group
            :config="{
                opacity: sentenceInfo.isHighlight ? 1 : 0,
            }"
        >
            <v-rect
                v-for="cooridate in sentenceInfo.cooridates"
                :config="{
                    x: cooridate.x,
                    y: cooridate.y,
                    width: cooridate.width,
                    height: cooridate.height,
                    fill: 'rgba(0,0,0,1)',
                    globalCompositeOperation: 'destination-out',
                }"
            ></v-rect>
        </v-group>
        <!-- 序号 -->
        <v-group
            :config="
                calNumberMarkPos(
                    sentenceInfo.cooridates[0],
                    defaultNumberMarkConfig.circle
                )
            "
        >
            <v-circle :config="defaultNumberMarkConfig.circle"></v-circle>
            <v-text
                :config="{
                    ...defaultNumberMarkConfig.text,
                    text: `${+sentenceIndex + 1}`,
                }"
            ></v-text>
        </v-group>
        <!-- 波浪线 -->
        <v-group>
            <v-path
                v-for="cooridate in sentenceInfo.cooridates"
                :config="createWaveLineConfig(cooridate)"
            ></v-path>
        </v-group>
    </v-group>
</template>
<script setup lang="ts">
import { calNumberMarkPos } from "@/components/origin-js";
import { onMounted, ref } from "vue";

const props = defineProps<{
    configList: AnyObject[];
    defaultNumberMarkConfig: AnyObject;
}>();
const emits = defineEmits(["click"]);

const groupRef = ref(null);
onMounted(() => {
    groupRef.value?.forEach((gRef, gIndex) => {
        gRef.getNode().on("tap", (e) => {
            emits("click", e, props.configList[gIndex]);
        });
    });
});

const createWaveLineConfig = (cooridates: { [key: string]: any }) => {
    const { x: startX, y: startY, width, height } = cooridates;
    // 定义波浪路径参数
    const amplitude = 1.5; // 振幅：波峰的高度
    const frequency = 0.35; // 频率：波的密度（数值越大，波越密集）
    const lineWidth = 3; // 线宽
    let pathData = "";

    for (let x = startX; x <= startX + width; x++) {
        // 控制路径点的密度
        const y = amplitude * Math.sin(x * frequency);
        const relX = x;
        const relY = startY + y + height + 2; // 2 为波浪线的偏移量
        pathData += x === 0 ? `M ${relX},${relY}` : ` L ${relX},${relY}`;
    }

    return {
        data: pathData,
        stroke: "#23E067", // 绿色
        strokeWidth: lineWidth,
        lineCap: "round", // 圆角端点
    };
};
</script>
<style lang="scss" scoped></style>
